<template>
  <div class="warningForm warningSelect">
    <h2 style="margin-bottom:20px;color:#606266">设置预警内容</h2>
    <el-form ref="addWarningForm" :model="addWarningForm" :rules="rules">
      <!-- <el-form-item label="预警场景" prop="scene">
        <el-select v-model="addWarningForm.scene" placeholder="请选场景">
          <el-option
            v-for="item in sceneList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="传感器类型" prop="type">
        <el-select v-model="addWarningForm.type" placeholder="请选择传感器类型" @change="change">
          <el-option
            v-for="item in typeAllList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="typeList.length" label="传感器选择" prop="typeselect">
        <el-select v-model="addWarningForm.typeselect" placeholder="请选择传感器" @change="change1">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item v-if="addWarningForm.type" label="时间选择" prop="time">
        <el-select v-model="addWarningForm.time" placeholder="请选择时间">
          <el-option
            v-for="item in timeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="预警等级" prop="color">
        <el-select v-model="addWarningForm.color" placeholder="请选择预警等级">
          <el-option
            v-for="item in warningColor"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="预警范围" prop="distance">
        <el-input
          v-model="addWarningForm.distance"
          class="input_el"
          :placeholder="'请填写预警最小值   '+danwei"
          @input="checkNumber(addWarningForm.distance)"
        />
        <!-- <div class="tips">
          <span>实际值超过此填写值时报警</span>
        </div> -->
      </el-form-item>
      <div class="tips1">
        <span>实际值超过此填写值时报警</span>
      </div>
    </el-form>
    <el-button
      style="margin-top:20px"
      type="primary"
      @click="addWarning('addWarningForm')"
    >修改预警范围</el-button>
  </div>
</template>

<script>
import { getData, getIndoorAirThreshold, getOutdoorAirThreshold, getRainThreshold, getSoilThreshold, getLaserThreshold, getCordThreshold, updateIndoorAirThreshold, updateOutdoorAirThreshold, updateRainThreshold, updateSoilThreshold, updateLaserThreshold, updateCordThreshold } from '@/api/warning'
import { validateWarning } from '@/utils/validate'
export default {
  name: 'AddWarning',
  props: ['warningColor'],
  data() {
    return {
      danwei: '',
      addWarningForm: {
        distance: '',
        type: '',
        typeselect: ''
      },
      // sceneList: [],
      typeAllList: [
        // {
        //   label: '偏移量上限报警',
        //   value: 0
        // },
        // {
        //   label: '平均偏移量报警',
        //   value: 1
        // },
        // {
        //   label: '变化速度超值报警',
        //   value: 2
        // }
      ],
      typeList: [
        // {
        //   label: '一小时',
        //   value: 0
        // },
        // {
        //   label: '一天',
        //   value: 1
        // },
        // {
        //   label: '一周',
        //   value: 2
        // }
      ],
      nowSelectList: [],
      checkAdd: false,
      nowBigType: null
    }
  },
  computed: {
    rules() {
      // 返回表单验证
      return validateWarning
    }
  },
  mounted() {
    // this.getSceneList();
    this.getData()
  },
  methods: {
    /* 获取场景*/
    // getSceneList() {
    //   getScene().then((res) => {
    //     if (res.data.records.length) {
    //       this.sceneList = res.data.records.map((item) => {
    //         return {
    //           label: item.name,
    //           value: item.id,
    //         };
    //       });
    //     } else {
    //       this.sceneList = [];
    //     }
    //   });
    // },
    getData() {
      getData().then(res => {
        const a = res.data.map(item => {
          return { label: item, value: item }
        })
        this.typeAllList = a
      })
    },
    change(name) {
      this.addWarningForm.typeselect = ''
      this.addWarningForm.distance = ''
      this.typeList = []
      this.nowBigType = name
      switch (this.nowBigType) {
        case '室内空气传感器' : this.getThreshold(getIndoorAirThreshold); break
        case '室外空气传感器' : this.getThreshold(getOutdoorAirThreshold); break
        case '雨量传感器' : this.getThreshold(getRainThreshold); break
        case '土壤传感器' : this.getThreshold(getSoilThreshold); break
        case '激光传感器' : this.getThreshold(getLaserThreshold); break
        case '拉绳传感器' : this.getThreshold(getCordThreshold); break
      }
    },
    change1(name) {
      this.danwei = '单位（' + this.serchDanwei(name)[0].unit + '）'
      this.addWarningForm.distance = this.serchDanwei(name)[0].threshold
    },
    serchDanwei(name) {
      return this.nowSelectList.map(it => {
        if (name === it.name) {
          return it
        }
      })
    },
    getThreshold(fn) {
      fn().then(res => {
        this.nowSelectList = res.data
        const a = res.data.map(it => {
          return { label: it.name, value: it.name }
        })
        this.typeList = a
      })
    },
    checkNumber(number) {
      if (number < 0) {
        this.$message({
          message: '输入值不能小于0',
          type: 'warning'
        })
        this.addWarningForm.distance = ''
      }
    },
    /* 新增报警范围*/
    addWarning(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const obj = {
            type: this.addWarningForm.type,
            typeselect: this.addWarningForm.typeselect,
            distance: this.addWarningForm.distance
          }
          this.serch(obj, form)
          // addWarningArea(obj).then((res) => {
          //   this.$message({
          //     message: '新增成功',
          //     type: 'success'
          //   })
          //   this.$refs[form].resetFields()
          //   this.$emit('refresh', true)
          // })
        }
      })
    },
    // 查找对应的值
    serch(obj, form) {
      const a = this.nowSelectList.map(it => {
        if (it.name === obj.typeselect) {
          it.threshold = Number(obj.distance)
          return it
        } else {
          return it
        }
      })

      const b = {}
      a.forEach(item => {
        b[item.englishName] = item.threshold
      })

      // a.map(item => {
      //   const name = item.name
      //   return { name: item.threshold }
      // })
      switch (this.nowBigType) {
        case '室内空气传感器' : this.updateShold(updateIndoorAirThreshold, b, form); break
        case '室外空气传感器' : this.updateShold(updateOutdoorAirThreshold, b, form); break
        case '雨量传感器' : this.updateShold(updateRainThreshold, b, form); break
        case '土壤传感器' : this.updateShold(updateSoilThreshold, b, form); break
        case '激光传感器' : this.updateShold(updateLaserThreshold, b, form); break
        case '拉绳传感器' : this.updateShold(updateCordThreshold, b, form); break
      }
    },
    updateShold(fn, b, form) {
      fn(b).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$refs[form].resetFields()
          this.$emit('update', 1)
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" lang="scss" scoped>
.colorArea {
  position: absolute;
  right: 60px;
  top: 30px;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-left: 20px;
  padding: 15px;

  span {
    display: block;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #000;
  }
}

.tips {
  position: absolute;
  left: 90px;
  top: 8px;
  display: flex;
  align-items: center;

  span {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 142, 232, 1);
    line-height: 23px;
    letter-spacing: 2px;
  }
}
.tips1 {
  // position: absolute;
  // right: -40px;
  // bottom: -20px;
  display: flex;
  align-items: center;

  span {
    font-size: 14px;
    font-weight: 500;
    // color: rgba(192,201,219,1);
    color: rgba(0, 142, 232, 1);
    line-height: 23px;
    letter-spacing: 2px;
  }
}
</style>
